<template>
  <view class="month-selector">
    <view class="month" v-for="month in months" :key="month" @click="selectMonth(month)">
		<view :class="{ selected: selectedMonth === month }">
		  <span>{{ month }}月</span>
		  <img v-if="selectedMonth==month" src="../../static/submit.png" alt="Overlay Image" class="overlay-image"/>
		</view>
	</view>	
  </view>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const months = [
  '1', '2', '3', '4', '5', '6',
  '7', '8', '9', '10', '11', '12'
];

const selectedMonth = ref('');
selectedMonth.value = new Date().getMonth() + 1 ;
const emit = defineEmits(['monthSelected']);

const selectMonth = (month) => {
  selectedMonth.value = month;
  emit('monthSelected', month);
};
</script>

<style scoped>
.month-selector {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin-bottom: 20px;
	}

	.month {
		position: relative;
		cursor: pointer;
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		color: #666;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		
	}

	.month .selected {
		border-radius: 10rpx;
		background-color: #e4edff;
		color: #055bfa;
		border: 1px solid #0C5FFA;
		
		font-size: 24rpx;
		font-weight: 500;
		color: #0C5FFA;
		
	}
	

	.overlay-image {
		background-color: rgba(12, 95, 250, 0.3);
		border-radius: 5px;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		object-fit: cover;
	}
</style>